<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.详聊v-for</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h3>v-for遍历数组</h3>
			<ul>
				<li v-for="(item, index) in arr" :key="index">
					{{item.name}} --- {{item.price}} --- {{index}}
				</li>
			</ul>

			<hr>

			<h3>v-for遍历对象</h3>
			<ul>
				<li v-for="(value,key,index) in obj">
					{{value}} -- {{key}} -- {{index}}
				</li>
			</ul>

			<hr>

			<h3>v-for遍历字符串</h3>
			<ul>
				<li v-for="(char,index) in str">
					{{char}} -- {{index}}
				</li>
			</ul>

			<h3>v-for遍历指定次数</h3>
			<ul>
				<li v-for="(number,index) in 10">
					{{number}}--{{index}}
				</li>
			</ul>

			<hr>

			<!-- v-for很健壮 -->
			<h2 v-for="item in undefined">哈哈</h2>
			<h2 v-for="item in ''">哈哈</h2>
			<h2 v-for="item in null">哈哈</h2>
			<h2 v-for="item in true">哈哈</h2>

		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					arr:[
						{name:'高尔夫',price:'15W'},
						{name:'比亚迪',price:'20W'},
						{name:'大雅迪',price:'300'}
					],
					obj:{
						name:'强哥',
						sex:'女'
					},
					str:'hello,atguigu!'
				}
			})
		</script>
	</body>
</html>